<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .big-box{
            width:400px;
            height:400px;
            background: blue;
        }
        .small-box{
            width:100px;
            height:100px;
            background: red;
        }
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-once>{{num}}</div>
        <ul>
            <li v-for="(item,index) in list" @click="checkFun(index)">
                <input type="checkbox" v-bind:checked="true">
                {{item.name}}
            </li>
        </ul>
        <input type="checkbox" v-model="checkAll"  @click="allFun">全选
        <div  v-cloak>{{checkAll}}</div>

        <ul>
            <li @click="state = 'html'">html</li>
            <li @click="state = 'js'">js</li>
            <li @click="state = 'css'">css</li>
        </ul>
        <div>
            <div v-show="state === 'html'">html内容</div>
            <div v-show="state === 'js'">js内容</div>
            <div v-show="state ==='css'">css内容</div>
        </div>

        <div @click="show =!show">
            主面板
        </div>

        <div v-show="show">
            子面板
        </div>

        <!-- 调查问卷 -->
        <!-- 表单修饰符： .trim .lazy .number 
             事件修饰符： .prevent  阻止浏览器默认事件  .stop  阻止冒泡  .once 只触发一次  .self 在自身触发
             按键修饰符: .enter .tap .up .down .left .right

             数组的变异方法：push pop splice
            -->
        <form action="">
            <input type="text" @keydown.enter="enterFun">
            <div>
                姓名：<input type="text" placeholder="请输入姓名" v-model.trim.lazy="obj.username">
            </div>
            <div>
                年龄：<input type="text" placeholder="请输入年龄" v-model.number="obj.age">
            </div>
            <div>
                性别：
                <input type="radio" value="男" name="sex" v-model="obj.sex">男
                <input type="radio" value="女" name="sex" v-model="obj.sex">女
            </div>
            <div>
                爱好：
                <template v-for="item in hobby">
                    <input type="checkbox" :value="item" v-model="obj.hobby">{{item}}    
                </template>
            </div>
            <div>
                家庭住址：
                <select v-model="obj.address">
                    <option value="" disabled selected>请选择</option>
                    <option v-for="item in address" :value="item">{{item}}</option>
                </select>
            </div>
            <div>
                建议：
                <textarea name="" id="" cols="30" rows="10" v-model="obj.suggest"></textarea>
            </div>
            {{obj}}
            <!-- <button @click.prevent="sub">提交</button> -->
        </form>
        
        <input type="checkbox" v-model="checkState">{{checkState}}

        <button @click="add(10)">+</button>{{num}}

        <div class="big-box" @click.self="big">
            <div class="small-box" @click.once="small" :key="num"></div>
        </div>

        <ul>
            <li v-for="(item,index) of list">{{index}}-----{{item.name}}</li>
        </ul>

        <ul>
            <li :class="{'red':index === status}" @click="status = index" v-for="(item,index) in tabList">{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            // el:'#app',
            data:{
                tabList:[
                    '首页',
                    '分类',
                    '我的'
                ],
                status:0,
                num:11,
                checkState:'true',
                hobby:['学习','打篮球','敲代码','吃饭'],
                address:['河北省','河南省','山东省','山西省'],
                obj:{
                    username:'',
                    age:'',
                    hobby:[],
                    suggest:'',
                    address:'',
                    sex:''
                },
                checkAll:false,
                state:'html',
                show:true,
                list:[
                    {
                        name:"衬衫",
                        price:12,
                        choose:true
                    },
                    {
                        name:"裙子",
                        price:12,
                        choose:false
                    },
                    {
                        name:"秋裤",
                        price:12,
                        choose:false
                    },
                    {
                        name:"秋衣",
                        price:12,
                        choose:false
                    }
                ]
            },
            methods:{
                tab(ind){
                    this.status = ind;
                },
                allFun(){
                    this.checkAll = !this.checkAll;
                    this.list.forEach(item => {
                        item.choose = this.checkAll;
                    })
                },
                checkFun(index){
                    this.list[index].choose = !this.list[index].choose;
                    this.checkAll = this.list.every(item => item.choose);
                },
                change(e){
                    this.checkState = e.target.checked;
                },
                add(num){
                    this.num += num;
                },
                sub(e){
                    e.preventDefault();
                },
                big(){
                    console.log('big')
                },
                small(){
                    console.log('small')
                },
                enterFun(){
                    console.log('enter');
                }
            }
        })
        vm.$mount('#app');
    </script>
</body>
</html>